<template>
	<div class="app-container">
		<div class="search-container">
			<el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<el-form-item label="关键字" prop="keywords">
					<el-input
						v-model="queryParams.keywords"
						placeholder="请输入关键字"
						clearable
						style="width: 200px"
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleQuery"
					>
						<i-ep-search/>
						搜索
					</el-button
					>
					<el-button @click="resetQuery">
						<i-ep-refresh/>
						重置
					</el-button
					>
				</el-form-item>
			</el-form>
		</div>
		
		<el-card shadow="never">
			<template #header>
				<div class="flex justify-between">
					<div>
						<el-button type="success" @click="openDialog()"
						>
							<i-ep-plus/>
							新增
						</el-button
						>
					</div>
				</div>
			</template>
			
			<el-table
				v-loading="loading"
				:data="tableList"
				highlight-current-row
				border
			>
				<el-table-column type="expand" style="display: flex;margin: auto">
					<template #default="scope">
						<el-table :data="scope.row.projects" style="width: 80%;display: flex;margin: auto"
											highlight-current-row
											stripe
											align="center"
											border>
							<el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
							<el-table-column label="项目名称" prop="projectName" align="center"/>
						</el-table>
					</template>
				</el-table-column>
				<el-table-column
					key="name"
					label="指挥部名称"
					align="center"
					prop="name"
					width="180"
				/>
				<el-table-column
					key="leader"
					label="指挥者姓名"
					width="200"
					align="center"
					prop="leader"
				/>
				<el-table-column
					key="mobile"
					label="指挥者手机号码"
					width="160"
					align="center"
					prop="mobile"
				>
				</el-table-column>
				<el-table-column
					key="cardno"
					label="指挥者身份证号码"
					width=""
					align="center"
					prop="cardno"
				/>
				<el-table-column
					key="createTime"
					label="创建时间"
					width="160"
					align="center"
					prop="createTime"
				/>
				<el-table-column label="操作" fixed="right" :width="mobile === 'mobile' ? 110 : 300">
					<template #default="scope">
						<el-button
							type="primary"
							link
							size="small"
							@click="resetPassword(scope.row.commanderId)"
						>
							<i-ep-lock/>
							重置密码
						</el-button>
						<el-button
							type="success"
							link
							size="small"
							@click="assignProject(scope.row.commanderId)"
						>
							<i-ep-SuitcaseLine/>
							项目分配
						</el-button>
						<el-button
							type="primary"
							link
							size="small"
							@click="openDialog(scope.row.commanderId)"
						>
							<i-ep-edit/>
							编辑
						</el-button
						>
						<el-button
							type="primary"
							link
							size="small"
							@click="handleDelete(scope.row.commanderId)"
						>
							<i-ep-delete/>
							删除
						</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			
			<pagination
				v-if="total > 0"
				v-model:total="total"
				v-model:page="queryParams.pageIndex"
				v-model:limit="queryParams.pageSize"
				@pagination="handleQuery"
			/>
		</el-card>
		
		<!-- 新增/修改弹窗 -->
		<addForm
			v-if="dialogAddOrEdit.visible"
			class="system"
			:style="{'--mobileAddFormHeight': mobile === 'mobile' ? (screenHeight - 117) + 'px' : 'auto'}"
			:dialog-add-or-edit="dialogAddOrEdit"
			@sendClose="sendClose"
		></addForm>
		
		<AssignProject
			v-if="dialogAssignProject.visible"
			class="system"
			:style="{'--mobileAddFormHeight': mobile === 'mobile' ? (screenHeight - 117) + 'px' : 'auto'}"
			:dialogAssignProject="dialogAssignProject"
			@sendAssignProjectClose="sendAssignProjectClose"
		></AssignProject>
		
		<el-dialog
			v-model="dialogResetPassword.visible"
			title="重置密码"
			width="300px"
			draggable
			@close="resetPasswordClose"
			close-icon="CloseBold"
		>
			<el-form label-width="0" :model="formPwd" ref="pwdFormRef" :rules="pwdRules">
				<label>请输入密码</label>
				<el-form-item label="" prop="password">
					<el-input placeholder="请输入密码" label="请输入密码" v-model="formPwd.password"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog_footer">
					<el-button type="primary" :loading="loading" @click="doResetPassword">更 新</el-button>
					<el-button @click="resetPasswordClose(true)">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
export default {
	name: "commander",
};
</script>

<script lang="ts" setup>
import addForm from "@/views/constructor/commander/addForm.vue";
import AssignProject from '@/views/constructor/commander/AssignProject.vue'
import {
	CommanderFormListType,
	ParamsType,
} from "@/api/constructor/project/types";
import {
	getCommanderList,
	deleteCommander,
	resetPasswordCommander
} from "@/api/constructor/project/index.ts";
import {useUserStore} from "@/store/modules/user";

import {useScreen} from "@/store/modules/screen";
import {computed} from "vue";
const itemSpan = ref(12)

const screenStore = useScreen()
const mobile = computed(() => ( screenStore.device ));
const screenHeight = computed(() => ( screenStore.device ));

function initScreen(){
	if(mobile.value === 'mobile'){
		itemSpan.value = 24;
	}else {
		itemSpan.value = 12;
	}
}

const useUser = useUserStore();

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<CommanderFormListType[]>();
const queryParams = reactive<ParamsType>({
	pageIndex: 1,
	pageSize: 20,
});
const pwdFormRef = ref()


const currentUserId = useUser.objectId;

const dialogAddOrEdit = reactive<DialogOption>({
	visible: false,
	title: "新增指挥部信息",
	footBtn: "新增",
});

const dialogAssignProject = reactive<DialogOption>({
	visible: false,
	title: "项目分配",
	footBtn: "保存",
});

const formPwd = reactive({
	password: ''
})

const pwdRules = reactive({
	password: [
		{required: true, trigger: 'blur', message: '请输入密码'},
		{required: true, trigger: 'blur', validator: pwdBulr}
	]
})

function pwdBulr(rule: any, value: any, callback: any) {
	if (value.length < 6) {
		callback(new Error("密码长度不能小于6位！"));
	} else {
		callback();
	}
}

/* 列表查询 */
async function handleQuery() {
	loading.value = true;
	let list = await getCommanderList(queryParams);
	if (list.type === 0) {
		if (list.success) {
			tableList.value = list.data.list;
			
			queryParams.pageIndex = list.data.pageNum;
			queryParams.pageSize = list.data.pageSize;
			total.value = list.data.total;
		} else {
			ElMessage.error(list.msg);
		}
	} else {
		ElMessage.error(list.msg);
	}
	loading.value = false;
}

/* 新增/编辑 */
function openDialog(id) {
	dialogAddOrEdit.visible = true;
	if (id) {
		dialogAddOrEdit.title = "修改指挥部信息";
		dialogAddOrEdit.footBtn = "修改";
		dialogAddOrEdit.id = id;
	} else {
		dialogAddOrEdit.id = 0;
		dialogAddOrEdit.title = "新增指挥部信息";
		dialogAddOrEdit.footBtn = "新增";
	}
}

/*项目分配*/
function assignProject(id) {
	dialogAssignProject.visible = true;
	dialogAssignProject.title = "项目分配";
	dialogAssignProject.footBtn = "保存";
	dialogAssignProject.id = id;
}

const dialogResetPassword = reactive({
	id: 0,
	visible: false,
})

/*重置密码*/
function resetPassword(id) {
	dialogResetPassword.id = id;
	dialogResetPassword.visible = true;
}

function resetPasswordClose(quxiao) {
	if(quxiao){
		ElMessage({
			type: 'info',
			message: '已取消!'
		})
	}
	pwdFormRef.value.resetFields();
	pwdFormRef.value.clearValidate();
	dialogResetPassword.visible = false;
}

function doResetPassword() {
	pwdFormRef.value.validate((valid: any) => {
		if (valid) {
			resetPasswordCommander(dialogResetPassword.id, {password: formPwd.password}).then((data) => {
				if (data.success) {
					ElMessage.success(data.msg);
					resetPasswordClose();
				} else {
					ElMessage.error(data.msg);
				}
			});
		}
	})
}

/* 删除 */
async function handleDelete(id) {
	let confirm = await ElMessageBox.confirm("确认删除?", "删除提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => true)
		.catch(() => false);
	if (!confirm) {
		ElMessage({
			type: 'info',
			message: '已取消！'
		})
		return;
	}
	let delInfo = await deleteCommander(id);
	if (delInfo.type === 0) {
		if (delInfo.success) {
			ElMessage.success(delInfo.msg);
			resetQuery();
		} else {
			ElMessage.error(delInfo.msg);
		}
	} else {
		ElMessage.error(delInfo.msg);
	}
}

/**
 * 重置查询
 */
function resetQuery() {
	queryFormRef.value.resetFields();
	queryParams.pageIndex = 1;
	queryParams.pageSize = 20;
	handleQuery();
}

/* 关闭弹窗并刷新列表 */
function sendClose(query) {
	dialogAddOrEdit.visible = false;
	if (query) {
		handleQuery();
	}
}

/* 关闭弹窗并刷新列表 */
function sendAssignProjectClose(query) {
	dialogAssignProject.visible = false;
	if (query) {
		handleQuery();
	}
}


onMounted(() => {
	initScreen();
	
	handleQuery();
});

</script>

<style lang="less" scoped>

</style>
